<template>
  <div class="home" ref="hometop" v-scroll="view">
     <header class="read" v-show="view.flag"><!--自定义属性 黏在顶部部-->
         <div class="infopos" >
            <router-link to="/city" class="infotwo"><span  ref="locals">选择您的城市</span></router-link>
            <i class="iconfont icon-tubiao-"></i>
         </div>
         <span>电影</span>
      </header>
     <button class="posbtn">
        <router-link to="/city" id="info" class="info"><span  ref="local">选择您的城市</span></router-link>
        <i class="iconfont icon-tubiao-"></i>
   </button><!--轮播图上的定位按钮-->
     <Myslide :init="slide" v-if="slide.length"/><!--放置轮播图-->
      
     <router-view />
  </div>
</template>

<script>

import { getSlide } from '../../api'
import Myslide from '@/components/mySlide'
// import location from '@/module/getLocation'

export default {
   data(){
      return {
         slide:[],
         view:{
            flag:false
         },
         info:'',
         cname:''
      }
   },
   components:{ 
      Myslide
   },
  created(){
     getSlide().then((res)=>{
        this.slide=res.data.data
        console.log(this.slide)
     })
  },  
  mounted(){
      this.cname = this.$cookie.getcookie('cityNAME')
      if(this.cname!=''){
         this.$refs.local.innerHTML=this.cname
         this.$refs.locals.innerHTML=this.cname
      }else{
         this.$refs.local.innerHTML='请选择您的城市'
         this.$refs.locals.innerHTML='请选择您的城市'
      }
     
  },
  directives:{
     scroll:(el,binding)=>{
      //   console.log(el)
      el.addEventListener("scroll",()=>{
         // console.log(el.scrollTop)
         var top=el.scrollTop
         if(top>193.58){
            binding.value.flag=true;
         }else{
            binding.value.flag=false
         }
         
      })
     }
  },
  methods:{
     getcookie(){
        this.cname=this.$cookie.getCookie('cityNAME')
     }
  }
}
</script>

<style>
.home{
   flex:1;
   overflow: auto;
   position: relative;
}
.home .carous{
   height:2rem;
   background:red;
}
.home .posbtn{
   /* width:1.5rem; */
   height:0.7rem;
   font-size:0.3rem;
   position: absolute;
   z-index: 9;
   opacity: 0.6;
}
header{
   background:white;
   height:0.71rem;
   position: sticky;
   top:0;
   text-align: center;
   line-height: 0.71rem;

}
header div{
   float:left;
   position: absolute;
   z-index: 9;
}
header span{
   font-size:0.4rem;
}

</style>